<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //事件绑定的3种方式

        //静态绑定，直接通过标签为属性赋值
        function index() {
            console.log('按钮1被点击了');
        }

        //动态绑定，通过DOM对象为属性赋值
        window.onload = function () {   // window.onload属性；当页面加载完成会执行这个函数
            var obj = document.getElementById('d2');
            obj.onclick = function () {
                document.write('按钮2被点击了')

            }


            //动态绑定，通过为DOM对象进行事件监听，使用addEventListener（事件名，回调函数）
            var jj = document.getElementById('d3');
            jj.addEventListener('click', function () {
                alert('按钮3被点击了')
            })

        }


    </script>
</head>

<body>
    <button onclick="index();">按钮1</button>
    <button id="d2">按钮2</button>
    <button id="d3">按钮3</button>

</body>

</html>